<template>
  <div class="headWrapper">
    <header class="header">
      <div class="container">
        <div class="logo">
          <i class="iconfont">&#xe70f;</i>
          <span>小鸡冲锋队</span>
        </div>
        <el-input
          v-if="hasSearch"
          class="search-bar"
          size="large"
          placeholder="请输入内容"
          v-model="keyword"
        >
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="藏品" value="nft_name"></el-option>
            <el-option label="作者" value="author"></el-option>
            <el-option label="收藏集" value="collection"></el-option>
          </el-select>
          <el-button
            :disabled="keyword.length == 0"
            @click="fetchData"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
        <div v-else class="search-bar"></div>
        <div class="navigation" @click="goTo('index')">
          <span>数字藏品</span>
        </div>
        <div class="navigation" @click="goTo('chart')">
          <span>风险统计</span>
        </div>
        <div class="user">
          <i class="el-icon-user-solid"></i>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
export default {
  name: "HeaderArea",

  props: {
    hasSearch: {
      type: Boolean,
      default: true,
    },
  },

  components: {},

  data() {
    return {
      select: "nft_name",
      keyword: "",
    };
  },

  computed: {},

  methods: {
    goTo(path) {
      this.$router.replace(path);
    },
    fetchData() {
      this.$emit("search", {
        select: this.select,
        keyword: this.keyword,
      });
    },
  },

  mounted() {},
};
</script>

<style scoped lang="less">
.headWrapper {
  width: 100%;
  height: 90px;
  // background-color: #fff;
}

.header {
  position: fixed;
  height: 90px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%), 0 1px 0 0 rgb(0 0 0 / 4%);

  .container {
    padding: 0;
    height: 100%;
    width: 100%;
    // max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .navigation span {
      cursor: pointer;
    }

    .logo {
      margin-left: 25px;
      height: 90px;
      line-height: 90px;
      .iconfont {
        font-size: 30px;
        margin-right: 10px;
      }
      span {
        color: #e70012;
        font-size: 25px;
        font-weight: 600;
        letter-spacing: -0.3px;
        font-style: oblique;
      }
    }
    .search-bar {
      width: 50%;
      height: 48px;

      /deep/ .el-input__inner {
        height: 48px;
        border: 1.5px solid #939494;
      }
      /deep/ .el-input .el-input__inner {
        height: 48px;
        border: 0;
      }
      /deep/ .el-input-group__prepend {
        width: 80px;
        background-color: #fff;
        border: 1.5px solid #939494;
        border-right: 0;
      }

      /deep/ .el-input-group__append {
        border: 1.5px solid #939494;
        border-left: 0;
      }
    }
    .user {
      margin-right: 25px;
      font-size: 30px;
    }
  }
}
</style>
